<!DOCTYPE html>
<html>

<head>
    <title>好友动态列表</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/travel.css"/>
    <script src="/js/plugins/jrender/jrender.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog/dialog.css">
    <script src="/js/plugins/dialog/dialog.min.js"></script>
    <script src="/js/common.js"></script>
</head>
<div class="search-head">
    <div class="row nav-search">
        <div class="col-2">
            <a href="javascript:window.history.go(-1);">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col-10">
            <div class="input-group-sm search">
                <input class="form-control searchBtn" placeholder="搜游记">
            </div>
        </div>
    </div>
</div>
<body>
<div class="container" id="allTravels">
    <div render-loop="list">
     
        <div class="row detail">
            <div class="col">
                <a render-key="list.id" render-fun="handle">
                    <h4 render-html="list.title"></h4>
                </a>
                <p>
                    <a href="userProfiles.html" >
                        <img class="rounded-circle head-img" render-src="list.author.headImgUrl">
                        <span render-html="list.author.nickName"></span> </a> 在
                    <span class="addr"render-html="list.place.name" ></span>

                </p>
                <p>
                    <i class="fa fa-eye fa-fw"></i>
                    <span>0</span>
                    <i class="fa fa-commenting fa-fw"></i>
                    <span>0</span>
                </p>
            </div>
            <div class="col bigimg">
                <a render-key="list.id" render-fun="handle">
                    <img render-src="list.coverUrl">
                </a>
            </div>
        </div>

    </div>
</div>

<script>
$(function () {
    var currentPage = 1; //当前页
    var travels; //当前页面的游记
    var pages; //总页数

    //高级查询
    //设置查询框点击事件
    $(".searchBtn").click(function () {
        currentPage=1;
    });
    //设置查询框的值改变事件
    //发送ajax请求获取筛选过的已发布游记
    $(".searchBtn").change(function () {
        var val= $(this).val();
        $.get("/travels/friendTravel",{keyword:val},function (data) {
            renderView(data);
            travels=data.list;
            pages=data.pages;
        });
    })  ;
    //发送ajax请求获取已发布游记
    $.get("/travels/friendTravel", function (data) {
        //渲染界面
        renderView(data);
        travels = data.list;
        pages = data.pages;
    });
    
    //设置窗口的滚动事件
    $(window).scroll(function () {
        //取出当前查询框的值
        var keyword= $(".searchBtn").val();
        if (isFull()) {
            //判断当前不是最后一页
            if (currentPage < pages) {
                $.get("/travels/friendTravel", {currentPage: ++currentPage,keyword:keyword}, function (data) {
                    //叠加之前的游记数据
                    $.merge(travels, data.list);
                    //再次渲染界面
                    renderView({list: travels});
                });
            } else {
                //提示到底了
                $(document).dialog({
                    type : "notice",
                    infoText: "没有下一页,到底了",
                    autoClose: 1500,
                    position: "bottom"
                });
            }
        }
    });

    function renderView(data) {
        $("#allTravels").renderValues(data, {
            handle: handle
        })
    }

    function handle(ele, val) {
        ele.href = "/travelContent.html?id="+val;
    }
});
</script>
</body>
</html>